<template>
  <view class="video-title" v-show="!isIconfontPlayShow">
    <text>@{{ videoInfo.data.creator.nickname }}</text>
    <text class="content-detail">{{ videoInfo.data.title }}</text>
    <view class="content-bottom" v-if="videoInfo.data.description">
      <view class="contentText animate">
        <text class="iconfont icon-douyin "></text>
        <text>{{ videoInfo.data.description }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'VideoDetailBar',
  data() {
    return {}
  },
  props: {
    videoInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.video-title {
  position: fixed;
  bottom: 98rpx;
  color: #fff;
  margin-left: 40rpx;
  .content-detail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 70vw;
    display: block;
    margin-top: 20rpx;
  }
  .content-bottom {
    white-space: nowrap;
    width: 70vw;
    display: block;
    margin-top: 20rpx;
    overflow: hidden;
  }
}
.icon-douyin {
  color: #fff;
  border: 4rpx solid purple;
  border-radius: 50%;
}
.contentText {
  width: 600rpx;
  display: block;
}
.animate {
  animation: move 6s linear infinite;
}
@keyframes move {
  0% {
    transform: translateX(80%);
  }

  100% {
    transform: translateX(-80%);
  }
}
</style>
